<template>
  <div id="nav">
    <router-link
    :to="path"
    tag="div"
    >
    <div v-if="img" class="text-nav" >
      <div class="text-img">
        <img :src="img ? img.url : ''" />
      </div>
      <div class="text-title">
        <p>{{ title }}</p>
        <div>{{ body }}</div>
      </div>
    </div>
    </router-link>
    <div v-if="!img && title" class="text-kind">
      <div class="text-kind-title">
        <span class="text-kind-title-top"></span>
        <div class="text-kind-title-nav">{{ title }}</div>
        <span class="text-kind-title-bottom"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    img: Object,
    title: String,
    body: String,
    objectId:String
  },
  data() {
    return {
      path: 'articles/' + this.objectId
    };
  },
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
#nav {
  margin-bottom: 55px;
}

.text-nav {
  margin: 20px auto;
  width: 90vw;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 15px #888888;

  .text-img img {
    width: 100%;
    height: 50%;
  }

  .text-title p {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .text-title div {
    margin: 20px auto;
    width: 90%;
    height: 59px;
    font-size: 15px;
    display: -webkit-box;
    display: -moz-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

.text-kind {
  margin: 20px auto;
  width: 90vw;
  height: 180px;

  .text-kind-title {
    margin: 0 auto;
    width: 80%;

    .text-kind-title-top {
      display: inline-block;
      width: 100%;
      height: 50px;
      background-image: url(@/assets/img/left.svg);
      background-repeat: no-repeat;
      background-size: 88px;
      background-position: left center;
    }

    .text-kind-title-bottom {
      display: inline-block;
      width: 100%;
      height: 50px;
      background-image: url(@/assets/img/right.svg);
      background-repeat: no-repeat;
      background-size: 88px;
      background-position: right center;
    }

    .text-kind-title-nav {
      margin: 20px 0;
      font-size: 20px;
      color: rgba(62, 173, 62, 0.731);
      text-align: center;
    }
  }
}
</style>